<template>
  <div style="height: 50px; line-height:50px;border-bottom: 1px solid #ccc; display: flex;justify-content: space-between" class="header">
    <div style="width: 200px">用户名</div>
    <div style=""></div>
    <div style="padding-right: 20px">
      <el-dropdown>
      <span class="el-dropdown-link">
        {{userinfo}}
        <el-icon><arrow-down/></el-icon>
      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item @click="$router.push('/login')">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "Header",
  data() {
    return {
      userinfo:"张三 19046576@qq.com",
      username:"",
    }
  },
  components:{

  },
  created() {
    console.log("Header created")
    let user = sessionStorage.getItem("user")
    console.log(user)
    if (user) {//user不为空
      request.post("/api/person/find",user).then(res => {
        if (res.code === '0') {
          this.$message({
            type:"success",
            message:"person查询成功"
          })
          let person = res.data
          sessionStorage.setItem("person",JSON.stringify(res.data))
          this.userinfo = person.username + " " + person.email;
        }else {
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
    }


  }
}
</script>

<style scoped>
.header {
  color: blue;
  padding-left: 30px;
}
.el-dropdown-link{
  height: 50px;
  line-height:50px;
}
</style>
